<template>
  <div class="index">
    <PublicHeader @showLogin="showLogin"></PublicHeader>
    <div class="main">
      <div class="wp">
        <IndexSwiper></IndexSwiper>
        <div class="Recommended">为你推荐</div>
        <VideoList></VideoList>
        <SortItem @showIndex="getIndex" v-bind:arr="['女婿','保镖','暴富','情感','悬疑','乡村','重生','都市']">
        </SortItem>
        <VideoList></VideoList>
      </div>
    </div>
    <LoginMod  v-show="isLoginShow"></LoginMod>
    <PublicFooter></PublicFooter>
  </div>
</template>

<script>
import PublicHeader from "@/components/common/publicheader/PublicHeader";
import PublicFooter from "@/components/common/publicfooter/PublicFooter";
import IndexSwiper from "@/components/common/swiper/IndexSwiper";
import VideoList from "@/components/content/video/VideoList";
import SortItem from "@/components/content/sort/SortItem";
import LoginMod from "@/views/home/childComps/LoginMod";
import {nextTick, ref} from "vue";
export default {
  name: "HomeView",
  setup(){
    let isLoginShow=ref(false)
    function  showLogin(){
      isLoginShow.value=false
      nextTick(()=>{
        isLoginShow.value=!isLoginShow.value
      })
    }

    function getIndex(index){
      console.log(index)
    }
    return {
      isLoginShow,
      //方法
      getIndex,
      showLogin,
    }
  },
  components:{
    LoginMod,
    PublicHeader, PublicFooter, IndexSwiper,
    VideoList,SortItem
  }
}
</script>

<style scoped>
.main{
  margin-top: 94px;
}
.wp{
  width: 80%;
  /*max-width: 1500px;*/
  margin: 0 auto;
}
.index{
  background: #111111;
}
.Recommended{
  font-size: 27px;
  line-height: 27px;
  margin-top: 57px;
  margin-bottom: 47px;
  color: #dff4ff;
}
</style>